<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Chatroom</title>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
</head>

<body>
    <p id="currentUser">当前用户：</p>
    <hr>

    <select id="toUser">
        <option value="zhangsan">张三</option>
        <option value="lisi">李四</option>
        <option value="wangwu">王五</option>
    </select>

    <input id="msg" name="msg" type="text"/>
    <button id="send">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message"></div>
</body>

<script>
    var wsData = {
        currentUser: null,
        toUser: $("#toUser").find("option:selected").val(), //获取选择框的当前选中值
        msg: null
    }

    $(function () {
        let currentUser = prompt('Please enter your id', '')
        $("#currentUser").html('当前用户：' + currentUser)
        initWebsocket(currentUser)
        wsData.currentUser = currentUser
    })
    
    // 改变发送对象
    $("#toUser").change(function () {
        let toUser = $("#toUser").val()
        $("#to").val(toUser)
        wsData.toUser = toUser
    });

    // 发送信息
    $("#send").click(function () {
        send(wsData)
    })

</script>
<script type="text/javascript" src="ws.js"></script>
</html>